<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录测试</title>
</head>
<body><h1>注册页面</h1>
<form action="SynchronousServlet">
    <input type="text" name="username" placeholder="请输入用户名" id="username">
    <span id="usernameSpan"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"> <br>
    <input type="text" name="phone" placeholder="请输入电话号码"> <br>
    <input type="submit">
</form>

</body>
<script src="js/axios-0.18.0.js"></script>

<script>

    let username = document.getElementById("username");
    username.onblur = function (){
        let url = "CheckServlet"
        let param=`username=${username.value}`// 模板字符串
        // console.log(param);
        axios.post(url,param).then(response=>{
        console.log(response.data);
        let span = document.getElementById("usernameSpan");


        if(response.data){
            span.innerText="用户名已存在，不可用";
            span.style.color="red";
        }else{
            span.innerText="用户名不存在，可用";
            span.style.color="green";
        }
    })
    }
</script>
</html>